<!-- 收藏夹页面 -->
<template>
  <div class="Favorites">
    <!-- 顶部导航栏 吸顶 -->
    <van-sticky>
      <van-nav-bar title="收藏夹">
        <template #left>
          <van-icon name="arrow-left" color="#fff" @click="goBack">返回</van-icon>
        </template>
      </van-nav-bar>
    </van-sticky>

    <!-- 没有收藏东西的时候 -->
    <div v-if="favorite.length === 0">
      <van-empty class="custom-image" :image='emptyFavorites' description="还没收藏东西哦~"/>  
    </div>  
    <div v-else>
      <!-- 加载动画 -->
      <xrzp-Loading v-if="SortDetail.length < favorite.length"></xrzp-Loading>
      <template v-else>
        <van-swipe-cell v-for="(item,index) in SortDetail" :key="index">
          <van-card :tag="tag(item)" :thumb="item.pic" :title="item.name" :thumb-link="`/menu/MenuDetail/${favorite[index]}`">
            <template #tags>
              <van-tag type="warning" class="mt5 mr10">好吃</van-tag>
              <van-tag type="warning" class="mr10">好玩</van-tag>
              <van-tag type="warning" class="mr10">好喝</van-tag>
              <van-tag type="warning" class="mr10 mb7">开心起来</van-tag>
            </template>
            <template #bottom>
              <div class="van-multi-ellipsis--l2 content" v-html="item.content"></div>
            </template>
          </van-card>
          <!-- 卡片右边的 加入购物车 删除 -->
          <template #right>
            <van-button square text="加入购物车" type="primary" class="delete-button" @click="addCart(favorite[index])"/>
            <van-button square text="取消收藏" type="danger" class="delete-button" @click="delFavorite(index)"/>
          </template>
        </van-swipe-cell>
      </template>
    </div>
  </div>
</template>

<script>
import image from '@/assets/image';
import { Toast } from 'vant';
import { mapState } from "vuex";
import { axios_detail } from "@/api/data_axios";
export default {
  data(){
    return{
      emptyFavorites:image.emptyFavorites,
      SortDetail:[],
      appkey:"b0e7418fe9bef46dcb47a53374ffbef1",
    }
  },
  computed:{
    ...mapState(["favorite"]),
    // 图片角标 闭包解决 v-for循环 计算属性 item 取不到的问题
    tag(){
      return (item)=>{
        return item.tag.split(',').length > 5 ?'火爆':'推荐';
      }
    },
  },
  mounted(){
    this.getData();
  },
  methods: {
    // 请求数据  同步请求数据(async await)
    async getData(){
      for(let index=0 ;index < this.favorite.length ; index++ ){
        let data = {
          id:this.favorite[index],
          appkey:this.appkey
        }
        let res = await axios_detail(data);
        this.SortDetail.push(res.result.result);
      }
    },
    // 加入购物车
    addCart(id){
      Toast.success('添加成功');
      this.$store.commit("addCart",id);
    },
    // 删除收藏
    delFavorite(index){
      // vuex中删除
      this.$store.commit("delFavorite",index);
      this.$router.go(0);
    },
    // 返回
    goBack(){
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.Favorites {
  .van-nav-bar {
    background-color: $base-color;
    ::v-deep .van-nav-bar__title{
      font-weight: bold;
    }
    .van-icon{
      font-weight: bold;
    }
  }
  .van-empty{
    padding: 30% 0;
  }
  .custom-image{
    ::v-deep .van-empty__image {
      width: 240px;
      height: 240px;
    }
  }
  .content{
    text-align: justify;
  }
  .van-card__content{
    justify-content: flex-start;
    .van-card__title{
      font-size: 15px;
      font-weight: bold;
      line-height: 20px;
    }
  }
  .delete-button {
    height: 100%;
  }
  .van-button--normal{
    font-weight: bold;
  }
}
</style>
